import React, { useEffect, useState } from 'react';
import { Carousel, Card, Row, Col, Badge } from 'antd';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

import { COLOR_THEME } from '@/config/theme';
import { urlMap, imagesMap, colorMap } from '@/utils';
import { getHomeCarousel, getHomeHotRecommend, getHomeNewRecommend } from '@/api/home';

// 模拟数据
const culturalData = Array.from({ length: 2 }, (_, i) => ({
    id: i + 1,
    title: `文化习俗 ${i + 1}`,
    image: require(`@/assets/images/home/home_0${(i % 6) + 1}.jpg`),
    description: '中国传统文化特色展示',
}));

function Home() {
    const navigate = useNavigate();
    const carouselImages = [
        require('@/assets/images/home/carouselImages/c1.png'),
        require('@/assets/images/home/carouselImages/c2.png'),
        require('@/assets/images/home/carouselImages/c3.png'),
        // require('@/assets/images/home/carouselImages/c4.png'),
        // require('@/assets/images/home/carouselImages/c5.png'),
        // require('@/assets/images/home/home_03.jpg'),
        // require('@/assets/images/home/home_04-enhanced.jpg')
    ];

    const [carouselList, setCarouselList] = useState([]);
    const [hotRecommendData, setHotRecommendList] = useState([]);
    const [newRecommendData, setNewRecommendList] = useState([]);
    const getCarouselList = async () => {
        await getHomeCarousel().then((res) => {
            if (res.code === 200) {
                const data = res.data?.filter((item) => item.status !== 0);
                setCarouselList(data);
            }
        });
    };
    const getHomeHotRecommendList = async () => {
        await getHomeHotRecommend().then((res) => {
            if (res.code === 200) {
                const data = res.data;
                setHotRecommendList(data);
            }
        });
    };
    const getHomeNewRecommendList = async () => {
        await getHomeNewRecommend().then((res) => {
            if (res.code === 200) {
                const data = res.data;
                setNewRecommendList(data);
            }
        });
    };

    useEffect(() => {
        getCarouselList();
        getHomeHotRecommendList();
        getHomeNewRecommendList();
    }, []);

    return (
        <div
            className="home-container"
            style={{
                minHeight: '66.6vh', // 修改容器高度
                // padding: '0px 0',    // 调整内边距
            }}
        >
            {/* 轮播图部分 */}
            <Carousel
                autoplay
                className="main-carousel"
                style={{
                    maxWidth: '1000px',
                    margin: '0 auto 20px',
                }}
                arrows
            >
                {carouselList.map((item, index) => {
                    console.log(item);
                    return (
                        <div key={index}>
                            <img
                                src={urlMap.defaultUrl + imagesMap.homePicturePath + item?.imagePath}
                                alt={`slide-${index}`}
                                style={{
                                    width: '100%',
                                    // height: '60vh',
                                    height: '40vh',
                                    objectFit: 'cover',
                                    borderRadius: 8,
                                }}
                            />
                        </div>
                    );
                })}
            </Carousel>
            <div
                style={{
                    backgroundColor: '#f9f9f9', // 背景色
                    padding: '10px',
                }}
            >
                {/* 热门推荐 */}
                <section
                    className="recommend-section"
                    style={{
                        maxWidth: '1200px',
                        margin: '0 auto',
                    }}
                >
                    <h2
                        className="section-title"
                        style={{
                            fontFamily: "'STXingkai', cursive",
                            fontSize: '30px', // 标题字体大小
                            // marginBottom: '10px',  // 标题下方间距
                            // textAlign: 'center'  // 标题居中对齐
                        }}
                    >
                        热门推荐
                    </h2>
                    <div className="scroll-container">
                        <Row gutter={[13, 16]} justify="start">
                            {' '}
                            {/* 减少水平间距 */}
                            {hotRecommendData.slice(0, 4).map((item) => (
                                <Col
                                    key={item}
                                    xs={24} // 手机端保持单列
                                    sm={12} // 平板端2列
                                    md={12} // 中等屏幕保持2列
                                    lg={8} // 大屏幕3列
                                    xl={6} // 超大屏幕4列
                                >
                                    <Badge.Ribbon
                                        text={item.tagsName || '传统文化'}
                                        color={(() => colorMap[item.tags] || colorMap['1'])()}
                                    >
                                        <Card
                                            hoverable
                                            cover={
                                                <img
                                                    alt={item.title}
                                                    src={
                                                        urlMap.defaultUrl +
                                                        imagesMap.thridPicturePath +
                                                        item?.id +
                                                        '/' +
                                                        item?.coverImage
                                                    }
                                                    style={{
                                                        height: 160, // 降低图片高度
                                                        objectFit: 'cover',
                                                    }}
                                                />
                                            }
                                            bodyStyle={{ padding: '12px' }} // 减少内边距
                                            onClick={() => navigate('/cultPop/' + item.id)}
                                        >
                                            <Card.Meta
                                                title={<span style={{ fontSize: '16px' }}>{item.title}</span>} // 放大标题
                                            />
                                        </Card>
                                    </Badge.Ribbon>
                                </Col>
                            ))}
                        </Row>
                    </div>
                </section>

                {/* 文化习俗展示 */}
                <section
                    className="cultural-section"
                    style={{
                        maxWidth: '1200px',
                        margin: '0 auto',
                    }}
                >
                    <h2 className="section-title">最新发布</h2>
                    <Row gutter={[24, 24]} justify="start">
                        {newRecommendData.slice(0, 3).map((item) => (
                            <Col key={item.id} xs={24} sm={12} md={8}>
                                <Badge.Ribbon
                                    text={item.tagsName || '传统文化'}
                                    color={(() => {
                                        const colorMap = {
                                            1: '#ff4d4f', // 红色
                                            2: '#52c41a', // 绿色
                                            3: '#faad14', // 金色
                                            4: '#13c2c2', // 青色
                                            5: '#1890ff', // 蓝色
                                        };
                                        return colorMap[item.tags] || colorMap['1'];
                                    })()}
                                >
                                    <Card
                                        hoverable
                                        cover={
                                            <img
                                                alt={item.title}
                                                src={
                                                    urlMap.defaultUrl +
                                                    imagesMap.thridPicturePath +
                                                    item?.id +
                                                    '/' +
                                                    item?.coverImage
                                                }
                                                style={{ height: 200, objectFit: 'cover' }}
                                            />
                                        }
                                        onClick={() => navigate('/cultPop/' + item.id)}
                                    >
                                        <Card.Meta title={item.title} description={item.summary} />
                                    </Card>
                                </Badge.Ribbon>
                            </Col>
                        ))}
                    </Row>
                </section>
            </div>
        </div>
    );
}

export default Home;
